A process component communicates to the user the progress of a particular process.
Sales Path CoachprototypeNot Compatible with S1 Mobile
Preview
Code
<div class="slds-grid">
<div class="slds-tabs--path" role="application">
<ul class="slds-tabs--path__nav" role="tablist">
<li class="slds-tabs--path__item slds-is-complete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
<span class="slds-tabs--path__stage">
<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span class="slds-tabs--path__title">Contacted</span>
</a>
</li>
<li class="slds-tabs--path__item slds-is-complete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
<span class="slds-tabs--path__stage">
<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span class="slds-tabs--path__title">Open</span>
</a>
</li>
<li class="slds-tabs--path__item slds-is-current" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
<span class="slds-tabs--path__stage">
<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-tabs--path__title">Unqualified</span>
</a>
</li>
<li class="slds-tabs--path__item slds-is-incomplete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
<span class="slds-tabs--path__stage">
<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-tabs--path__title">Nurturing</span>
</a>
</li>
<li class="slds-tabs--path__item slds-is-incomplete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
<span class="slds-tabs--path__stage">
<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-tabs--path__title">Closed</span>
</a>
</li>
</ul>
</div>
<button class="slds-button slds-button--brand slds-button--small button--border-filled slds-path__mark-complete slds-no-flex slds-m-horizontal--small">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--left">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Mark Status as Complete</button>
</div>
Open coaching content section.
Wizarddev ready
Preview
- Small
- Medium
- Large
Code
<div class="slds-wizard" role="navigation">
<ol class="slds-wizard__list">
<li class="slds-wizard__item slds-is-active">
<a href="#void" class="slds-wizard__link">
<span class="slds-wizard__marker"></span>
<span class="slds-wizard__label slds-text-heading--label slds-truncate">Navigation</span>
</a>
</li>
<li class="slds-wizard__item slds-is-active">
<a href="#void" class="slds-wizard__link">
<span class="slds-wizard__marker"></span>
<span class="slds-wizard__label slds-text-heading--label slds-truncate">Actions</span>
</a>
</li>
<li class="slds-wizard__item slds-is-active">
<a href="#void" class="slds-wizard__link">
<span class="slds-wizard__marker"></span>
<span class="slds-wizard__label slds-text-heading--label slds-truncate">Compact Layout</span>
</a>
</li>
<li class="slds-wizard__item">
<a href="#void" class="slds-wizard__link">
<span class="slds-wizard__marker"></span>
<span class="slds-wizard__label slds-text-heading--label slds-truncate">Review</span>
</a>
</li>
<li class="slds-wizard__item">
<a href="#void" class="slds-wizard__link">
<span class="slds-wizard__marker"></span>
<span class="slds-wizard__label slds-text-heading--label slds-truncate">Invite</span>
</a>
</li>
</ol>
<span class="slds-wizard__progress">
<span class="slds-wizard__progress-bar" style="width:50%;"></span>
</span>
</div>
The process wizard communicates to the user which step of a process they may be on. The length of the progress bar can be changed by modifying the inline width style on .slds-wizard__progress-bar
with JavaScript. The .slds-wizard__progress-bar
accepts a range from 0% to 100%.
When a step becomes active, the .slds-wizard__item
should get the class .slds-is-active
. This class should be applied through JavaScript. When the step is completed, the .slds-is-active
class should persist on .slds-wizard__item
. This will keep the step indicator blue to show the step has been completed.
Component Overview
Usage
Class Name | Usage | |
---|---|---|
.slds-tabs--path | Applied to:
Initializes default tabset | Required: Required Comments:-- |
.slds-tabs--path__nav | Applied to:
Creates the container for the default tabs | Required: Required Comments:-- |
.slds-tabs--path__item | Applied to:
Styles each list item as a single tab | Required: Required Comments:-- |
.slds-tabs--path__link | Applied to:
Styles each | Required: Required Comments:-- |
.slds-tabs--path__content | Applied to:
Styles each tab content wrapper | Required: Required Comments:-- |
.slds-tabs--path__stage | Applied to:
Contains the check mark when the stage is completed | Required: Required Comments:This class is only required in the sales path tabs and is contained inside the |
.slds-tabs--path__title | Applied to:
Contains the name of the stage | Required: Required Comments:This class is only required in the sales path tabs and is contained inside the |
.slds-is-complete | Applied to:
Creates the completed stage of the sales path | Required: No, optional element or modifier Comments:-- |
.slds-is-current | Applied to:
Creates the current stage of the sales path | Required: No, optional element or modifier Comments:-- |
.slds-is-incomplete | Applied to:
Creates the incomplete stage of the sales path | Required: No, optional element or modifier Comments:-- |
.slds-is-active | Applied to:
Creates the active stage of the sales path | Required: No, optional element or modifier Comments:This class must be placed on the item programatically when the guidance section is used |
.slds-wizard | Applied to:
Initializes popover | Required: Required Comments:-- |
.slds-wizard__list | Applied to:
An ordered list containing steps of a process | Required: Required Comments:-- |
.slds-wizard__item | Applied to:
A list item for each step of the process | Required: Required Comments:-- |
.slds-wizard__link | Applied to:
Hyperlink of the list item, user can jump between steps | Required: Required Comments:-- |
.slds-wizard__marker | Applied to:
Dot indicator for each step | Required: Required Comments:-- |
.slds-wizard__label | Applied to:
Text description for each step | Required: Required Comments:-- |
.slds-wizard__progress | Applied to:
Container for progress bar | Required: Required Comments:
|
.slds-wizard__progress-bar | Applied to:
Bar showcasing which step of the process a user is on | Required: Required Comments:Inline width styles should be modified with JavaScript |
.slds-is-active | Applied to:
Stateful class that turns dot indicator and progress bar blue | Required: Required Comments:Class should be applied thought JavaScript |